GCTC-NTGC / TalentCloud

import React from "react";

import ReactDOM from "react-dom";

import { useIntl } from "react-intl";

import { useDispatch } from "react-redux";

import { DispatchType } from "../../configureStore";

import {

  useFetchApplicationsByJob,

  useFetchJob,

} from "../../hooks/applicationHooks";

import { loadingMessages } from "../Application/applicationMessages";

import { ApplicationReview } from "../../models/types";

import ReviewApplications from "./ReviewApplications";

import RootContainer from "../RootContainer";

import { Portal } from "../../models/app";

import {

  updateApplicationReview,

  batchUpdateApplicationReviews,

} from "../../store/Application/applicationActions";

interface ReviewApplicationsRootProps {

  jobId: number;

  portal: Portal;

}

const ReviewApplicationsRoot: React.FC<ReviewApplicationsRootProps> = ({

  jobId,

  portal,

}): React.ReactElement => {

  const intl = useIntl();

  const dispatch = useDispatch<DispatchType>();

  const applications = useFetchApplicationsByJob(jobId, dispatch);

  const job = useFetchJob(jobId, dispatch);

  const handleUpdateApplicationReview = async (

    editedApplicationReview: ApplicationReview,

  ): Promise<void> => {

    await dispatch(updateApplicationReview(editedApplicationReview));

  };

  const handleBatchUpdateApplicationReviews = async (

    editedApplicationReviews: ApplicationReview[],

  ): Promise<void> => {

    await dispatch(batchUpdateApplicationReviews(editedApplicationReviews));

  };

  return (

    <div data-clone>

      {job === null || applications === null ? (

        <h2

          data-c-heading="h2"

          data-c-align="center"

          data-c-padding="top(2) bottom(2)"

        >

          {intl.formatMessage(loadingMessages.loading)}